import React, { createElement, useState } from 'react';

import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { Pagination } from 'antd';

import './details.less'

const { TextArea } = Input;

class Comments extends React.Component {
    state = {
        current: 3,
    };

    // 点击改变页码时
    onChange = page => {
        console.log(page);
        this.setState({
            current: page,
        });
    };

    // 评论区


    render() {
        return <div className='comments'>
            {/* 标题 */}
            <div className="title">
                <h3 className="title">评论</h3>
                <span className="commentsNum">共<span className="num">79</span>条评论</span>
            </div>
            <div className="cmnsContent">
                {/* 评论输入框 */}
                <div className="iptArea">
                    <div className="avatar">
                        <img src="http://p4.music.126.net/3HCD9O7eJG5JQ-oKSPGZiA==/19128203788463786.jpg?param=50y50" alt="" />
                    </div>
                    <div className="yourComment">
                        <textarea name="" id="" cols="99" rows="3" placeholder="评论"></textarea>
                        <div className="down">
                            <div className="emoji">
                                <a href="" className="icon smell"></a>
                                <a href="" className="icon at"></a>
                            </div>
                            <div className="submit">
                                <span className="leftWords">140</span>
                                <button className="enter">评论</button>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 精彩评论 */}
                <div className="newComments">
                    <h3>精彩评论</h3>
                    <ul>
                        <li>
                            <div className="avatar"><a href=""><img src="" alt="" /></a></div>
                            <div className="contentWrap">
                                <p className="up">
                                    <a className="nickName">露露快闭嘴吧</a>
                                    <span className="flag"></span>
                                    ：评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                                </p>
                                <div className="down">
                                    <div className="time">7月6日 20:05</div>
                                    <div className="right">
                                        <span className="agree">
                                            <i className="icon2 yesOrNot"></i>
                                            <span className="num">(10579)</span>
                                        </span>
                                        <span className="line">|</span>
                                        <a href="" className="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>


                {/* 最新评论 */}
                <div className="newComments">
                    <h3>最新评论(78)</h3>
                    <ul>
                        <li>
                            <div className="avatar"><img src="" alt="" /></div>
                            <div className="contentWrap">
                                <p className="up">
                                    <a className="nickName">露露快闭嘴吧</a>
                                    <span className="flag"></span>
                                    ：评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                                </p>
                                <div className="down">
                                    <div className="time">7月6日 20:05</div>
                                    <div className="right">
                                        <span className="agree">
                                            <i className="icon yes"></i>
                                            <span className="num">(10579)</span>
                                            <span>|</span>
                                            <a href="" className="reply">回复</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                {/* 分页器 */}
                <div className="pagination">
                    <Pagination current={this.state.current} onChange={this.onChange} total={50} hideOnSinglePage={true} pageSize={20} />
                </div>
            </div>
        </div>;
    }
}

export default Comments